<!DOCTYPE html>
<html>

<head>
    <title>嘻嘻学算数</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <p>
    <h1 id='x1'>1</h1>
    <h2>+</h2>
    <h1 id='x2'>1</h1>
    <h2>=</h2>
    <button>
        <h1 id='y1'>2</h1>
    </button>

    </p>
    <!-- <p>123</p> -->

    <div>
        <button onclick="ToggleRun()" id="button1">STOP</button>
        <a href="./clock.html">
            <button>To clock</button>
        </a>
    </div>




</body>

</html>




<script>
    var status = "true";
    function getRandomInt(max, min = 0) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    function ToggleRun() {
        console.log(status)
        button = document.getElementById("button1");
        if (status == "false") {
            status = "true";
            button.textContent = "STOP";
            button.style.color = "red";
            // button.style.border= "inset 0 0 0 2px red";
            $('y1').hide = true;
        }

        else {
            status = "false";
            button.textContent = "START";
            button.style.color = "green";
            button.style.textShadow = "inset 0 0 0 2px #5ef483";
            $('y1').hide = false;
        }


    }
    function myFunction() {
        console.log(status)
        if (status == "true") {
            var x1 = getRandomInt(10, 5);
            var x2 = getRandomInt(10);

            
            document.getElementById('x1').textContent = x1;
            document.getElementById('x2').textContent = x2;
            document.getElementById('y1').textContent = x1 + x2;
        }
    }
    setInterval(myFunction, 50)

</script>